<!DOCTYPE html>
<!-- saved from url=(0076)http://yth.0101data.cn/course-orginal/cse5a0e5af7a7f3a9-93397175/contributed -->
<html>
	<!-- Mirrored from clear.lcrm.in/dark/layout_fixed.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 02 May 2017 07:54:24 GMT -->

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>我的团队贡献率</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

		<link rel="stylesheet" href="css/site.completed.min.css" />
		<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
		<link rel="stylesheet" href="css/toastr.min.css" />
		<link rel="stylesheet" href="css/select2.min.css" />
		<link rel="stylesheet" href="css/cbvm.app.css" />
		<!--end page level css-->
		<!-- global js -->
		<script type="text/javascript" src="js/jquery.3.js"></script>
		<!--放在最前面-->
		<script type="text/javascript" src="js/site.completed.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript" src="js/select2.min.js"></script>
		<script type="text/javascript" src="js/toastr.js"></script>
		<script type="text/javascript" src="js/cbvm.app.js"></script>
		<script type="text/javascript" src="js/pnotify.custom.min.js"></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<!--
        	作者：864478199@qq.com
        	时间：2018-03-21
        	描述：样式
        -->
		<link rel="stylesheet" href="css/jQuery-ui.1.10.4.min.css" />
		<link rel="stylesheet" href="css/layui.css" />
		<link rel="stylesheet" href="mystyle.css" />

	</head>

	<!-- 模块拼接js -->
	<script type="text/javascript">
		$(document).ready(function() {
			$('.header').load("header.html");
			$('.left').load("left.html");
		})
	</script>

	<body class="skin-default fixed-menu">
			<!-- 外部头部拼接 -->
			<div class="header"></div>
			<div class="wrapper row-offcanvas row-offcanvas-left">
				<aside class="left-side sidebar-offcanvas">
					<!--左侧菜单 -->
					<div class="left"></div>
					<!-- /.sidebar -->
				</aside>
				<aside class="right-side fixednav_right">
					<section class="content-header">
						<!--
                    	作者：864478199@qq.com
                    	时间：2018-03-26
                    	描述：修改面包屑
                    -->
						<ol class="breadcrumb">
							<li>
								<a href="http://yth.0101data.cn/">
									<i class="fa fa-fw ti-home"></i> 面板
								</a>
							</li>
							<li class="active">
								我的团队贡献率
							</li>
						</ol>
						<h1>
				        我的团队贡献率
				    </h1>

					</section>
					<section class="content">
						<!-- second table start -->
						<div class="row">
							<div class="col-lg-12">
								<div class="panel ">
									<!--
                	作者：864478199@qq.com
                	时间：2018-03-20
                	描述：slider贡献率展示形式
                -->
									<div class="panel-body condition-filter">
										<form id="form-validation" method="post" enctype="multipart/form-data" class="form-horizontal form-bordered form">
											<div class="fixed-table-toolbar filter-action sub">
												<div class="row">
													<div class="col-sm-4"><span class="form-error-message"><label style="display: none;">团队共贡献率(0)总和必须等于100!</label></span></div>
													<div class="col-sm-4"></div>
													<div class="col-sm-4">
														<div class="pull-right">
															<button type="button" class="layui-btn layui-btn-sm submit-all">
                         				 提交贡献率
                      			</button>
														</div>
													</div>
												</div>
											</div>
											<div class="team-gxl">
												<ul>
													<li>
														<div class="js-slider">
															<label>温锋</label>
															<div id="slider-range-max"></div>
															<input type="text" class="form-control gxl" id="amount" disabled="disabled" />
															<input type="text" class="form-control desc" placeholder="请输入描述" />
														</div>
													</li>
													<li>
														<div class="js-slider">
															<label>林晓晖</label>
															<div id="slider-range-max2"></div>
															<input type="text" class="form-control gxl" id="amount2" disabled="disabled" />
															<input type="text" class="form-control desc" placeholder="请输入描述" />
														</div>
													</li>
													<li>
														<div class="js-slider">
															<label>王越</label>
															<div id="slider-range-max3"></div>
															<input type="text" class="form-control gxl" id="amount3" disabled="disabled" />
															<input type="text" class="form-control desc" placeholder="请输入描述" />
														</div>
													</li>
													<li>
														<div class="js-slider">
															<label>王明灿</label>
															<div id="slider-range-max4"></div>
															<input type="text" class="form-control gxl" id="amount4" disabled="disabled" />
															<input type="text" class="form-control desc" placeholder="请输入描述" />
														</div>
													</li>
													<li>
														<div class="js-slider">
															<label>王明灿</label>
															<div id="slider-range-max5"></div>
															<input type="text" class="form-control gxl" id="amount5" disabled="disabled" />
															<input type="text" class="form-control desc" placeholder="请输入描述" />
														</div>
													</li>
													<li>
														<div class="js-slider">
															<label>王明灿</label>
															<div id="slider-range-max6"></div>
															<input type="text" class="form-control gxl" id="amount6" disabled="disabled" />
															<input type="text" class="form-control desc" placeholder="请输入描述" />
														</div>
													</li>

												</ul>

											</div>
											<div class="cho-file">
												<div class="title">
													文档提交
												</div>
												<button type="button" class="layui-btn layui-btn-primary layui-btn-sm select-fangan">
                   				 选择方案
                			</button>
												<div class="file-list" >
													<ul>
													</ul>
												</div>
											</div>
										</form>
									</div>
								</div>
								<!--
              	作者：864478199@qq.com
              	时间：2018-03-26
              	描述：底部
              -->
								<div class="login-footer2">
									<span>厦门理工学院 &copy; 2018</span>
								</div>
							</div>
						</div>
					</section>
				</aside>
			</div>
	</body>

	<!--
    	作者：864478199@qq.com
    	时间：2018-03-20
    	描述：jquery silder js代码
    -->

	<script>
		$(function() {

			$("#slider-range-max").slider({
				range: "max",
				min: 0,
				max: 100,
				value: 25,
				slide: function(event, ui) {
					$("#amount").val(ui.value);
				}
			});
			$("#amount").val($("#slider-range-max").slider("value"));

			$("#slider-range-max2").slider({
				range: "max",
				min: 0,
				max: 100,
				value: 25,
				slide: function(event, ui) {
					$("#amount2").val(ui.value);
				}
			});
			$("#amount2").val($("#slider-range-max2").slider("value"));

			$("#slider-range-max3").slider({
				range: "max",
				min: 0,
				max: 100,
				value: 25,
				slide: function(event, ui) {
					$("#amount3").val(ui.value);
				}
			});
			$("#amount3").val($("#slider-range-max3").slider("value"));

			$("#slider-range-max4").slider({
				range: "max",
				min: 0,
				max: 100,
				value: 25,
				slide: function(event, ui) {
					$("#amount4").val(ui.value);
				}
			});
			$("#amount4").val($("#slider-range-max4").slider("value"));

			$("#slider-range-max5").slider({
				range: "max",
				min: 0,
				max: 100,
				value: 25,
				slide: function(event, ui) {
					$("#amount5").val(ui.value);
				}
			});
			$("#amount5").val($("#slider-range-max5").slider("value"));

			$("#slider-range-max6").slider({
				range: "max",
				min: 0,
				max: 100,
				value: 25,
				slide: function(event, ui) {
					$("#amount6").val(ui.value);
				}
			});
			$("#amount6").val($("#slider-range-max6").slider("value"));
		});
	</script>
	<script>
		layui.use(['form','upload'], function() {
			var form = layui.form,
				upload = layui.upload,
				layer = layui.layer;
				//layui复选框多选开始
			form.on('checkbox(allChoose)', function(data) {
				var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
				child.each(function(index, item) {
					item.checked = data.elem.checked;
				});
				form.render('checkbox');
			})
			form.on('checkbox(itemChoose)', function(data) {
				var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
				var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
				if(sib == total) {
					$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", true);
					form.render();
				} else {
					$(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", false);
					form.render();
				}
			});
			//layui复选框多选结束
			
			upload.render({
				elem: '.select-fangan',
				method: 'post',
				accept: 'file',
				exts: 'doc|docx|jpg|png|jpeg',
				auto: false,
				bindAction: '.submit-all',
				multiple: true,
				url: '',//接口请求地址
				choose: function(obj){
					//将每次选择的文件追加到文件队列
			    var files = obj.pushFile();
			    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
			    obj.preview(function(index, file, result){
			      console.log(index); //得到文件索引
			      console.log(file); //得到文件对象
//			      console.log(result); //得到文件base64编码，比如图片
			      if(file){
			      	$('.file-list').css('display','block');
			      	$('.file-list ul').append('<li class="file'+index+'"><img src="img/file-icon.png" /><span>'+ file.name +'</span><img src="img/del-icon.png" class="delete-file-'+index+'"/></li>')
			      }
			      //这里还可以做一些 append 文件列表 DOM 的操作
			      $('.delete-file-'+index).click(function(){
			      	delete files[index];
			      	$('.file'+index).html('');
			      	console.info('删掉的文件'+file.name);
			      })
			      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
//			      delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
			    });
			 	},
				before : function(obj){//obj参数包含的信息，跟 choose回调完全一致，可参见上文。
				 	layer.load(); //上传loading
				},
				allDone: function(obj){ //当文件全部被提交后，才触发
			    console.log(obj.total); //得到总文件数
			    console.log(obj.successful); //请求成功的文件数
			    console.log(obj.aborted); //请求失败的文件数
			    layer.closeAll('loading'); //关闭loading
				},
				done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”
					//假设code=0代表上传成功
			    if(res.code == 0){
			      //do something （比如将res返回的图片链接保存到表单的隐藏域）
			    }
			    
			    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
			    var item = this.item;
			    
			    //文件保存失败
			    //do something
				 	console.log('res是什么'+res);
				}
			})
		});
	</script>

</html>